<template>
    <a-modal v-model:open="visible.value" title="新建提醒" @cancel="emit('update:modelVisible', false); resetForm()" width="610px"
        @ok="handleOk" cancelText="取消" okText="确定">

        <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="formState" ref="formRef">

            <a-form-item label="提醒任务" name="remindTask">
                <a-select  v-model:value="formState.remindTask" :options="taskData" mode="multiple"></a-select>
            </a-form-item>
            <a-form-item label="提醒方式" name="remindType">
                <a-radio-group v-model:value="formState.remindType" name="radioGroup">
                    <a-radio value="系统提示">系统提示</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="提醒留言" name="remindMessage">
                <a-textarea v-model:value="formState.remindMessage" show-count :maxlength="100"
                    :autosize="{ minRows: 4, maxRows: 4 }" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts" setup>
import type { UnwrapRef } from 'vue';
interface FormState {
    remindTask: [];
    remindType: string;
    remindMessage: string;
}
const formRef = ref();
const formState: UnwrapRef<FormState> = reactive({
    remindTask: undefined,
    remindType: '系统提示',
    remindMessage: undefined
});
const labelCol = { style: { width: '130px' } };
const wrapperCol = { span: 14 };

const props = defineProps({
    modelVisible: {
        type: Boolean,
        default: false
    },

})
const resetForm = () => {
  formRef.value.resetFields();
};
const emit = defineEmits(['update:modelVisible']);
const visible = computed(() => {
    return ref(props.modelVisible)
});

const taskData = [...Array(10)].map((_, i) => ({
    value: i,
    label: '软件工程A' + i,
}))


const handleOk = () => {

    emit('update:modelVisible', false);
    resetForm()
    console.log('submit!', toRaw(formState));
};
</script>
